<link rel="stylesheet" href="dashboard/style.css">

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
      <div class="navbar-header" ng-include="'app-navbar-header.html'"></div>
		
		<div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li ng-repeat="navLink in navLinks"
            ng-class="{
                active   : isNavLinkActive(navLink),
                dropdown : navLink.links,
            }">
            <a ng-if="!navLink.links" href="{{ navLink.url }}">{{ navLink.name }}</a>

            <a ng-if=" navLink.links" href="{{ navLink.url }}"
                class="dropdown-toggle">{{ navLink.name }} <span class="caret"></span></a>
            <ul ng-if="navLink.links" class="dropdown-menu" role="menu">
                <li ng-repeat="link in navLink.links"
                    ng-class="{divider : link.isDivider}">
                    <!-- TODO different style -->
                    <a ng-if="!link.isDivider" href="{{ link.url }}">
                        <strong ng-if=" isNavLinkActive(link)">{{ link.name }}</strong>
                        <span   ng-if="!isNavLinkActive(link)">{{ link.name }}</span>
                    </a>
                </li>
            </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<style>body { padding-top: 70px; }</style>

<div class="header">{{ title }}</div>
